
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<!-- 头部 -->

<div th:fragment="header">
<header>
    <div id="menu-bar" class="el-icon-s-unfold"></div>
    <a href="#" class="logo"><span>T</span>ravel</a>
    <nav class="navbar">
        <a href="/index">Home</a>
        <a href="/guide">Guide</a>
        <a href="/packages">Packages</a>
        <a href="/services">Services</a>
        <a href="/gallery">Gallery</a>
        <a href="/evaluate">Evaluate</a>
        <a href="/contact">Contact US</a>
    </nav>
    <!-- 图标 -->
    <div class="icons">
        <i class="el-icon-search" id="search-btn"></i>
        <i class="el-icon-user" id="login-btn"></i>
        <span style="color: white"><span shiro:principal property="email"></span></span>
    </div>
    <!-- 搜索框 -->
    <form action="" class="search-bar-container">
        <input type="search" id="search-bar" placeholder="search here...">
        <label for="search-bar" class="el-icon-search"></label>
    </form>
</header>
<!-- 登录表单 -->
<div id="login" class="login-form-container">
    <i class="el-icon-close close-icon" id="form-close"></i>
    <form id="login-form">
        <h3>login</h3>
        <input type="email" id="email" name="email" class="box" placeholder="enter your email">
        <input type="password" id="password" name="password" class="box" placeholder="enter your password">
        <input type="submit" value="login now" class="btn">
        <input type="checkbox" id="remember">
        <label for="remember">remember me</label>
        <p>don't have and account? <a href="#" id="registerNow">register now</a></p>
    </form>
</div>

    <div id="register" class="login-form-container">
        <i  class="el-icon-close close-icon" id="form-register-close"></i>
        <form id="register-form">
            <h3>register</h3>
            <input type="email" id="addEmail" name="email" class="box" placeholder="enter your email">
            <input type="password" id="addPassword" name="password" class="box" placeholder="enter your password">
            <input type="submit" value="register now" class="btn">
        </form>
    </div>

</div>

</html>




